<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/personal.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	</head>
	<script type="text/javascript" src="layui/layui.all.js"></script>
	<body>
		<div class="home-page">
			<div class="personal">
				<!-- 左边 -->
				<div class="personal-left">
					<!-- 用户信息 -->
					<div class="left-user">
						<div class="left-user-portrait">
							<div class="left-user-portrait-t">
								<img src="" alt="我是头像">
							</div>
							<div class="left-user-portrait-n">HI~XXXX</div>
							<div class="left-user-portrait-h">怀德仁大药房</div>
						</div>
						<div class="left-user-num">
							<ul class="num-list size">
								<li>3</li>
								<li>126</li>
								<li>0</li>
								<li>1</li>
							</ul>
							<ul class="num-list">
								<li>历史</li>
								<li>积分</li>
								<li>收藏</li>
								<li>优惠劵</li>
							</ul>
						</div>
					</div>
					<!-- 信息展示 -->
					<div class="left-box">
						<div class="box-one">
							<div>
								<span class="layui-icon layui-icon-log"></span>
								<p>到账日期</p>
							</div>
							<div class="noble">12天</div>
						</div>
						<div class="box-one">
							<div>
								<span class="layui-icon layui-icon-rmb"></span>
								<p>当前欠款</p>
							</div>
							<div class="noble">￥1350</div>
						</div>
						<div class="box-one">
							<div>
								<span class="layui-icon layui-icon-dollar"></span>
								<p>供需付款</p>
							</div>
							<div class="noble">￥2160</div>
						</div>
						<div class="box-one">
							<div>
								<span class="layui-icon layui-icon-service"></span>
								<p>到账日期</p>
							</div>
						</div>
					</div>
					<!-- 收货地址 -->
					<div class="left-address">
						<div class="address-top">
							<span class="layui-icon layui-icon-location"></span>
							<p>收货地址：</p>
						</div>
						<div class="address-bottom">云南省昆明市西山区 前福路凌云大厦1103</div>
					</div>
					<!-- 我的订单栏 -->
					<div class="left-order">
						<div class="order-list">
							<span class="layui-icon layui-icon-list"></span>
							<div>我的订单</div>
							<span class="layui-icon layui-icon-right"></span>
						</div>
						<div class="order-list" onclick="myopen()">
							<span class="layui-icon layui-icon-list"></span>
							<div>我的收藏</div>
							<span class="layui-icon layui-icon-right"></span>
						</div>
						<div class="order-list" onclick="myopen()">
							<span class="layui-icon layui-icon-list"></span>
							<div>我的积分</div>
							<span class="layui-icon layui-icon-right"></span>
						</div>
						<div class="order-list" onclick="myopen()">
							<span class="layui-icon layui-icon-list"></span>
							<div>浏览历史</div onclick="myopen()">
							<span class="layui-icon layui-icon-right"></span>
						</div>
						<div class="order-list">
							<span class="layui-icon layui-icon-list"></span>
							<div>退出登录</div>
							<span class="layui-icon layui-icon-right"></span>
						</div>
					</div>
				</div>
				<div class="personal-right">
					<!-- 我的订单 -->
					<div class="right-order">
						<div class="right-order-title">
							<span class="layui-icon layui-icon-spread-left"></span>
							我的订单
						</div>
						<div class="layui-tab right-order-content">
							<ul class="layui-tab-title order-tabnav">
								<li class="layui-this">所有订单</li>
								<li>待开单</li>
								<li>已开单</li>
								<li>已收货</li>
								<li onclick="myopen()">待评价</li>
								<li onclick="myopen()">退款/货</li>
							</ul>
							<div class="layui-tab-content">
								<!-- 所有订单 -->
								<div class="layui-tab-item layui-show">
									<!-- 第一个 -->
									<div class="order-item">
										<div class="order-item-title">
											<div class="order-item-title-one">订单详情</div>
											<div class="order-item-title-two">订单状态</div>
											<div class="order-item-title-two">发货周期</div>
											<div class="order-item-title-two">订单总价</div>
											<div class="order-item-title-two">下单时间</div>
										</div>
										<div class="order-item-content">
											<div class="order-item-content-one">
												<div class="order-item-content-one-x">
													<div>订单编号：<span class="x-s">5614231564611546</span></div>
													<div>一个订单（共10个商品）</div>
												</div>
											</div>
											<div class="order-item-content-two">
												<div class="x-s">已开单</div>
											</div>
											<div class="order-item-content-two">24小时</div>
											<div class="order-item-content-two">
												<div class="x-s">¥1350</div>
											</div>
											<div class="order-item-content-two">2020-07-22</div>
										</div>
										<div class="order-item-footer">
											<div class="order-item-footer-determine footer-but">确认收货</div>
										</div>
									</div>
									<!-- 第二个 -->
									<div class="order-item">
										<div class="order-item-title">
											<div class="order-item-title-one">订单详情</div>
											<div class="order-item-title-two">订单状态</div>
											<div class="order-item-title-two">发货周期</div>
											<div class="order-item-title-two">订单总价</div>
											<div class="order-item-title-two">下单时间</div>
										</div>
										<div class="order-item-content">
											<div class="order-item-content-one">
												<div class="order-item-content-one-x">
													<div>订单编号：<span class="x-s">5614231564611546</span></div>
													<div>一个订单（共10个商品）</div>
												</div>
											</div>
											<div class="order-item-content-two">
												<div>
													<div class="x-s">已开单</div>
													<div class="x-x">（已开单  8  个   未开单  2  个）</div>
												</div>
											</div>
											<div class="order-item-content-two">24小时</div>
											<div class="order-item-content-two">
												<div class="x-s">¥1350</div>
											</div>
											<div class="order-item-content-two">2020-07-22</div>
										</div>
									</div>
									<!-- 第三个 -->
									<div class="order-item">
										<div class="order-item-title">
											<div class="order-item-title-one">订单详情</div>
											<div class="order-item-title-two">订单状态</div>
											<div class="order-item-title-two">发货周期</div>
											<div class="order-item-title-two">订单总价</div>
											<div class="order-item-title-two">下单时间</div>
										</div>
										<div class="order-item-content">
											<div class="order-item-content-one">
												<div class="order-item-content-one-x">
													<div>订单编号：<span class="x-s">5614231564611546</span></div>
													<div>一个订单（共10个商品）</div>
												</div>
											</div>
											<div class="order-item-content-two">
												<div>
													<div class="x-s">已开单</div>
													<div class="x-x">（款项尚未结清）</div>
												</div>
											</div>
											<div class="order-item-content-two">24小时</div>
											<div class="order-item-content-two">
												<div class="x-s">¥1350</div>
											</div>
											<div class="order-item-content-two">2020-07-22</div>
										</div>
										<div class="order-item-footer">
											<div class="order-item-footer-immediately footer-but">立即结清</div>
										</div>
									</div>
									<!-- 第四个 -->
									<div class="order-item">
										<div class="order-item-title">
											<div class="order-item-title-one">订单详情</div>
											<div class="order-item-title-two">订单状态</div>
											<div class="order-item-title-two">发货周期</div>
											<div class="order-item-title-two">订单总价</div>
											<div class="order-item-title-two">下单时间</div>
										</div>
										<div class="order-item-content">
											<div class="order-item-content-one">
												<div class="order-item-content-one-x">
													<div>订单编号：<span class="x-s">5614231564611546</span></div>
													<div>一个订单（共10个商品）</div>
												</div>
											</div>
											<div class="order-item-content-two">
												<div>
													<div class="x-s">已开单</div>
													<div class="x-x">(剩余付款时间：00:04:59）</div>
												</div>
											</div>
											<div class="order-item-content-two">24小时</div>
											<div class="order-item-content-two">
												<div class="x-s">¥1350</div>
											</div>
											<div class="order-item-content-two">2020-07-22</div>
										</div>
										<div class="order-item-footer">
											<div class="order-item-footer-determine footer-but">取消订单</div>
											<div class="order-item-footer-immediately footer-but">立即付款</div>
										</div>
									</div>
									
									<!-- 分页 -->
									<div id="test1" class="paging"></div>
									
								</div>
								<!-- 待开单 -->
								<div class="layui-tab-item">内容2</div>
								<!-- 已开单 -->
								<div class="layui-tab-item">内容3</div>
								<!-- 已收货 -->
								<div class="layui-tab-item">内容4</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</body>

	<script>
		function myopen() {
			var layer = layui.layer;
			layer.msg('敬请期待，正在开发');
		}
		//tab 选项卡
		layui.use('element', function() {
			var element = layui.element;
		});
		//分页
		layui.use('laypage', function(){
		  var laypage = layui.laypage;
		  
		  //执行一个laypage实例
		  laypage.render({
		    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
		    ,count: 50 //数据总数，从服务端得到
		  });
		});
	</script>

</html>
